<template>
    <div class="product-list-wrap">
        <div class="product-list-content">
            <header class="category-header wrap">
                <a href='javascript:;' @click="goBack">
                    <svg-icon icon-class="goback"
                              style="width: 30px;height: 30px;margin-top: 10px;position: relative"></svg-icon>
                </a>
                <div class="header-search">
                    <i class="nbicon nbSearch"></i>
                    <input
                            type="text"
                            class="search-title"
                            @mouseenter="textEnter"
                            @mouseleave="textLeave"
                            v-model="keyword"/>
                </div>
                <span class="search-btn" @click="getSearch">搜索</span>
            </header>
            <van-tabs type="card" color="#1baeae" @click="changeTab">
                <van-tab title="新品" name="1"></van-tab>
                <van-tab title="销量" name="2"></van-tab>
                <van-tab title="价格↑" name="3"></van-tab>
                <van-tab title="价格↓" name="4"></van-tab>
            </van-tabs>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    @offset="300"
            >
                <div class="product-item" v-for="(item, index) in productList" :key="index"
                     @click="productDetail(item)">
                    <img v-lazy="prefix(item.pic)"/>
                    <div class="product-info">
                        <p class="name" v-html="item.name"></p>
                        <p class="subtitle" v-html="item.subTitle"></p>
                        <p class="price">￥ {{item.price}}</p>
                        <span class="price">{{item.productCategoryName}}</span>
                        <span class="price" style="float: right; margin-right: 20px">销量 {{item.sale}}</span>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import {getQueryString, prefix} from '../../common/js/utils'
    import {search} from '../../api/product'
    import {Toast} from 'vant'
    import {esSearch} from "../../api/search";
    export default {
        name: "product-list",
        data() {
            return {
                keyword: this.$route.query.keyword || '',
                searchBtn: false,
                seclectActive: false,
                refreshing: false,
                list: [],
                loading: false,
                finished: false,
                productList: [],
                totalPage: 0,
                page: 1,
                sort: '1'
            }
        },
        methods: {
            async init() {
                const {categoryId, name, brandId, from} = this.$route.query
                const params = {
                    brandId: this.brandId,
                    keyword: this.keyword,
                    pageNum: 1,
                    pageSize: 100,
                    productCategoryId: categoryId,
                    sort: this.sort
                }
                if (this.keyword !== ''){
                    esSearch(this.keyword).then(res => {
                        const result = res.data;
                        this.productList = result.data;
                        this.totalPage = result.totalPage;
                        if (this.page >= result.totalPage) {
                            this.finished = true
                        }
                        this.loading = false;
                    })
                }else {
                    search(params).then(res => {
                        const result = res.data;
                        this.productList = result.data;
                        this.totalPage = result.totalPage;
                        if (this.page >= result.totalPage) {
                            this.finished = true
                        }
                        this.loading = false;
                    })
                }
            },
            goBack() {
                this.$router.go(-1)
            },
            productDetail(item) {
                this.$router.push({path: `product/${item.id}`})
            },
            textEnter() {
            },
            textLeave() {

            },
            getSearch() {
                this.onRefresh()
            },
            pageScroll() {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                scrollTop > 50 ? this.seclectActive = true : this.seclectActive = false
            },
            onLoad() {
                if (!this.refreshing && this.page < this.totalPage) {
                    this.page = this.page + 1
                }
                if (this.refreshing) {
                    this.productList = [];
                    this.refreshing = false;
                }
                this.init()
            },
            onRefresh() {
                this.refreshing = true
                this.finished = false
                this.loading = true
                this.page = 1
                this.onLoad()
            },
            changeTab(name, title) {
                this.sort = name
                this.onRefresh()
            }
        }
    }
</script>


<style lang="less" scoped>
    @import '../../common/style/mixin';

    .product-list-content {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1000;
        background: #fff;

        .category-header {
            .fj();
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding: 0 15px;
            .boxSizing();
            font-size: 15px;
            color: #656771;
            z-index: 10000;

            &.active {
                background: @primary;
            }

            .icon-left {
                font-size: 25px;
                font-weight: bold;
            }

            .header-search {
                display: flex;
                width: 76%;
                height: 20px;
                line-height: 20px;
                margin: 10px 0;
                padding: 5px 0;
                color: #232326;
                background: #F7F7F7;
                .borderRadius(20px);

                .nbSearch {
                    padding: 0 5px 0 20px;
                    font-size: 17px;
                }

                .search-title {
                    font-size: 12px;
                    color: #4e4b4b;
                    background: #F7F7F7;
                }
            }

            .icon-More {
                font-size: 20px;
            }

            .search-btn {
                height: 28px;
                margin: 8px 0;
                line-height: 28px;
                padding: 0 5px;
                color: #fff;
                background: @primary;
                .borderRadius(5px);
                margin-top: 10px;
            }
        }
    }

    .product-list-refresh {
        margin-top: 78px;

        .product-item {
            .fj();
            width: 100%;
            height: 120px;
            padding: 10px 0;
            border-bottom: 1px solid #dcdcdc;

            img {
                width: 140px;
                height: 120px;
                padding: 0 10px;
                .boxSizing();
            }

            .product-info {
                width: 56%;
                height: 120px;
                padding: 5px;
                text-align: left;
                .boxSizing();

                p {
                    margin: 0
                }

                .name {
                    width: 100%;
                    max-height: 40px;
                    line-height: 20px;
                    font-size: 15px;
                    color: #333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .subtitle {
                    width: 100%;
                    max-height: 20px;
                    padding: 10px 0;
                    line-height: 25px;
                    font-size: 13px;
                    color: #999;
                    overflow: hidden;
                }

                .price {
                    color: @primary;
                    font-size: 16px;
                }
            }
        }
    }
</style>
